import React, { useEffect, useState } from 'react'
import useGetTableData from '@/hooks/useGetTableData'
import { getProductSizeGroupAll, getproductSizePageList } from '@/api/goods'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useSizeColumns } from '../columns'
import { ProductSizeDetailVO } from '../types'
import CustomTable from '@/components/CustomTable'
import { SearchForm } from '@/components/CustomForm'
import { STATUSBANDOPTIONS } from '@/constant'
const Index: React.FC = () => {
  const [form] = useForm()
  const [sizeOptions, setsizeOptions] = useState<IOptionItem[]>([])
  const { tableProps, params, setParams, search, reset } = useGetTableData<ProductSizeDetailVO>(
    getproductSizePageList,
    {
      form: form,
      defaultFieldsParams: {
        enableStatus: 1,
      },
      immediatelySend: false,
    },
  )
  useEffect(() => {
    getSizeOptions()
    search({
      ...params,
      enableStatus: 1,
    })
  }, [])
  const getSizeOptions = async () => {
    const res = await getProductSizeGroupAll()
    if (res.code === 200) {
      const data =
        res?.data?.map((item: { sizeGroupName: string; sizeGroupId: string }) => {
          return {
            label: item.sizeGroupName,
            value: item.sizeGroupId,
          }
        }) || []
      setsizeOptions(data)
    }
  }
  return (
    <PageContainer className="goods_sizeconfig_page">
      <SearchForm
        className="sizeconfigDom"
        params={params}
        form={form}
        searchConfig={[
          {
            name: 'productSizeGroupId',
            label: '尺码组',
            type: 'Select',
            option: sizeOptions,
            placeholder: '请选择尺码组',
            config: {
              showSearch: true,
              filterOption: true,
              optionFilterProp: 'label',
            },
          },
          { label: '状态', name: 'enableStatus', type: 'Select', option: STATUSBANDOPTIONS },
        ]}
        onFinish={(vals: any) => {
          search({
            ...vals,
          })
        }}
        onReset={() => {
          reset()
        }}
      ></SearchForm>
      <CustomTable
        bordered
        columns={useSizeColumns()}
        {...tableProps}
        rowKey={(rows) => rows.sizeDetailId}
        extraHeight={28}
        isScrollY
        filterDomClassName="sizeconfigDom"
      />
    </PageContainer>
  )
}

export default Index
